<template>
  <div class="sdk-map-content">
    <div class="map-content" id="map"></div>
    <div class="lon-lat">
      <div>当前层级：{{ options.zoom }}</div>
      <div class="lon-lat-title">当前鼠标位置：</div>
      <div>经度：{{ options.mouseCenter[0] }}</div>
      <div>纬度：{{ options.mouseCenter[1] }}</div>
      <div class="lon-lat-title">当前海图中心点：</div>
      <div>经度：{{ options.center[0] }}</div>
      <div>纬度：{{ options.center[1] }}</div>
    </div>
    <div class="button-list">
      <div>
        <el-button size="mini" type="success" @click="zoomIn">放大</el-button>
      </div>
      <div>
        <el-button size="mini" type="success" @click="zoomOut">缩小</el-button>
      </div>
      <div>
        <el-button size="mini" type="success" @click="setZoom">
          缩放到10级
        </el-button>
      </div>
      <div>
        <el-button size="mini" type="success" @click="moveCenter">
          移动到指定位置
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import xMaps from "x-maps";
import "x-maps/xMaps.css";

window.xMaps = xMaps;
export default {
  data() {
    return {
      code: "",
      options: {
        center: [122, 30],
        zoom: 8,
        id: "map",
        minZoom: 4,
        maxZoom: 18,
        mouseCenter: [122, 30],
      },
      map: null,
    };
  },
  methods: {
    codeRun(code) {
      this.code = code;
      try {
        eval(code);
      } catch {
        this.$message.error("语法存在错误，请检查你的代码");
      }
    },
    zoomIn() {
      this.map.zoomIn();
    },
    zoomOut() {
      this.map.zoomOut();
    },
    setZoom() {
      this.map.setZoom(10);
    },
    moveCenter() {
      this.map.moveTo({
        center: [122.5, 30.5],
        zoom: 12,
      });
    },
  },
  mounted() {
    const options = {
      center: [122, 30],
      zoom: 8,
      id: "map",
      minZoom: 4,
      maxZoom: 18,
    };
    this.map = new xMaps();
    this.map.initMap(options);
    this.options = this.map.mapOptions;
  },
};
</script>

<style scoped lang="scss">
.sdk-map-content {
  width: 100%;
  height: 100%;
  position: relative;
  .map-content {
    width: 100%;
    height: 100%;
    background-color: #a3ccff;
  }
  .lon-lat {
    top: 20px;
    left: 20px;
    position: absolute;
    background-color: #dddc;
    padding: 10px;
    border-radius: 5px;
    .lon-lat-title {
      margin-top: 15px;
    }
  }
  .button-list {
    position: absolute;
    top: 230px;
    left: 20px;
    > div {
      margin-bottom: 10px;
    }
  }
}
</style>
